<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    <el-breadcrumb-item>角色列表</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card>
    <div>
      <el-button type="primary" size="large" @click="addRole">添加角色</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table stripe size="large" row-key="id" :data="roles" border style="width: 100%">
      <el-table-column type="expand" width="50">
        <template #default="props">
          <!-- 一层循环 -->
          <el-row v-for="item1 in props.row.children" :key="item1.id" class="rights">
            <el-col :span="4">
              <el-tag @close="delRoleRights(props.row, item1.id)" size="large" closable>{{ item1.authName }}</el-tag>
              <el-icon>
                <CaretRight />
              </el-icon>
            </el-col>
            <el-col :span="20">
              <!-- 二层循环 -->
              <el-row :style="{ borderTop: index2 === 0 ? 'none' : '1px solid var(--el-border-color)' }" :key="item2.id"
                v-for="(item2, index2) in item1.children">
                <el-col :span="6">
                  <el-tag @close="delRoleRights(props.row, item2.id)" size="large" type="success" closable>{{
                    item2.authName }}</el-tag>
                  <el-icon>
                    <CaretRight />
                  </el-icon>
                </el-col>
                <el-col :span="18">
                  <!-- 三层循环 -->
                  <el-tag @close="delRoleRights(props.row, item3.id)" v-for="item3 in item2.children" :key="item3.id"
                    size="large" type="warning" closable>{{ item3.authName
                    }}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="#" type="index" width="50" />
      <el-table-column prop="roleName" label="角色名称" />
      <el-table-column prop="roleDesc" label="角色描述" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" :icon="Edit" @click="editRoles(scope.row.id)">编辑</el-button>
          <el-button type="danger" :icon="Delete" @click="delRoles(scope.row.id)">删除</el-button>
          <el-button type="warning" :icon="Setting" @click="dispRights(scope.row)">分配权限</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <AddRoles :visible="addRoleVisible" :id="rid" @close="closeAddRole" />
  <DispRights :visible="dispRightsVisible" :row-data="userRights" @close="closeDispRights" />
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue';
import { getRolesApi, delRolesApi, delRolesRightsApi } from '@/api/authInterface';
import { Edit, Delete, Setting, CaretRight } from '@element-plus/icons-vue';
import AddRoles from './components/addRoles.vue';
import DispRights from "./components/DispRights.vue";

const { proxy } = getCurrentInstance() as any

onMounted(() => {
  getRoles()
})

const roles = ref([])
const getRoles = () => {
  getRolesApi().then((res: any) => {
    roles.value = res.data
  })
}
// 添加角色
const addRoleVisible = ref(false)
const addRole = () => {
  rid.value = undefined
  addRoleVisible.value = true
}
const closeAddRole = () => {
  getRoles()
  addRoleVisible.value = false
}

// 编辑角色
const rid = ref()
const editRoles = (id: number) => {
  rid.value = id
  addRoleVisible.value = true
}

// 删除角色
const delRoles = (id: number) => {
  proxy.$messageBox.confirm(
    '将会删除此角色?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      delRolesApi(id).then(res => {
        getRoles()
        proxy.$message.success('删除成功')
      })
    })
}

// 分配权限
const dispRightsVisible = ref(false)
const userRights = ref()
const dispRights = (row: any) => {
  userRights.value = row
  dispRightsVisible.value = true
}
const closeDispRights = () => {
  getRoles()
  dispRightsVisible.value = false
}

// 删除角色指定权限
const delRoleRights = (row: any, rightsId: number) => {
  proxy.$messageBox.confirm(
    '确定删除此权限?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      delRolesRightsApi(row.id, rightsId).then(res => {
        row.children = res.data
        proxy.$message.success('删除成功')
      })
    })
}
</script>

<style scoped lang="scss">
.el-card {
  margin-top: 20px;
}

.el-table {
  margin-top: 20px;
}

.rights {
  align-items: center;
  padding: 0 10px;
  border-top: 1px solid var(--el-border-color);
}

.el-tag {
  margin: 7px;
}
</style>